<template>
	<view class="search-container" :class="themeName">
		<u-sticky offset-top="0" h5-nav-height="0">
			<!-- 搜索 -->
			<view class="search-input">
				<u-search class="flex-1" v-model="search.keyword" height="72" bg-color="#F4F4F4" :show-action="false"
					:placeholder="$zhTran('请输入要搜索的商品')" @focus="focusSearch" @search="handleSearch" />
				<view class="search-action" @tap="handleSearch(search.keyword)"> {{$zhTran('搜索')}} </view>
			</view>
		</u-sticky>

		<!-- 搜索结果 -->
		<view class="search-content">
			<!-- 商品列表 -->
			<mescroll-body ref="mescrollRef" :up="upOption" :down="{ auto: false }" @init="mescrollInit"
				@down="downCallback" @up="upCallback" :bottom="100">
				<view :class="['goods-container', `goods-container-rectangle`]">
					<view class="goods-item" v-for="item,idx in goodsList" :key="item.id">

						<view class="goods">
							<view class="goods--rectangle flex-wrap">
								<view class="error-desc flex white p-10 m-b-20" v-if="item.error_type>0">
									<u-icon name="info-circle-fill" color="#fff" size="32" class="m-r-10"></u-icon>
									<view>
										{{item.error_desc}},{{$zhTran('已被下架,建议调整商品'+([1,2].indexOf(item.error_type)>-1?'价格':'服务费'))}}
									</view>
								</view>
								<view class="flex col-top" style="width: 100%;" @tap="checkGoods(idx)">
									<!-- 商品图片 -->
									<view class="goods-images">
										<u-image width="100%" height="100%" :src="item.goods.image" mode="aspectFit" />
										<u-checkbox class="img-box" :value="item.checked">
										</u-checkbox>
									</view>
									<!-- 商品信息 -->
									<view class="goods-content">
										<!-- 名称 -->
										<view class="goods-box goods-name line-2">
											<slot name="name">{{ item.goods.name }}</slot>
										</view>

									</view>
								</view>
								<view class="price-box flex row-between m-t-20">
									<view class="price-item strategy">
										<view class="price">{{price_symbol}}{{item.price_strategy.price}}</view>
										<view class="desc flex">
											<u-image width="30rpx" height="30rpx" :src="item.price_strategy.icon"
												mode="scaleToFill" class="m-r-10" />
											<text>{{item.price_strategy.price_title}}</text>
										</view>
									</view>
									<view class="price-item">
										<view class="price">{{price_symbol}}{{item.sell_price}}</view>
										<view class="desc">{{$zhTran('当前售价')}}</view>
									</view>
									<view class="price-item">
										<view class="price">{{price_symbol}}{{item.service_desc}}</view>
										<view class="desc">{{$zhTran('服务费')}}</view>
									</view>
								</view>

								<view class="profit p-20 m-t-20">
									<!-- 当前售价-成本+服务费=最终分润 -->
									<!-- 当前售价-(当前售价 * 成本率)+服务费=最终分润 -->
									{{$zhTran('分润')}}：<text>{{item.sell_price}}</text>-<text>{{item.cost}}</text>+<text>{{item.service_desc}}</text>=<text>{{item.profit}}</text>
								</view>
							</view>

							<view class="btn-box flex row-between">
								<view class="btn-item" @tap="editStatus(item.goods_id,!item.status)">
									{{$zhTran(item.status?'上架':'下架')}}
								</view>
								<view class="btn-item" @tap="editPrice(item)">{{$zhTran('改价')}}</view>
								<button class="btn-item share flex row-center" :hover-stay-time="150" open-type="share"
									hover-class="none" :data-goodsId="item.goods_id" :data-name="item.goods.name"
									:data-image="item.goods.image">{{$zhTran('转发')}}</button>
							</view>
						</view>
					</view>

				</view>

			</mescroll-body>
		</view>
		<!-- 底部结算栏 -->
		<view class="footer flex bg-white row-between">
			<!-- left -->
			<view class="flex">
				<checkbox-group class="normal">
					<u-checkbox label-size="28rpx" @change="changeAllSelect('')" id="checkAll" value="all"
						v-model="isSelectedAll" :label-disabled="false" :disabled="selectAllDisabled">
						<text class="normal">{{$zhTran('全选')}}</text>
					</u-checkbox>
				</checkbox-group>
				<view v-if="goodsCheckedLength>0">{{$zhTran('已选')}}：<text
						style="color: rgba(64, 115, 250, 1);">{{goodsCheckedLength}}</text>{{$zhTran('个商品')}}</view>
			</view>
			<view class="right-btn lighter" @tap="batchEdit">{{$zhTran('批量操作')}}</view>
		</view>

		<u-popup v-model="showGoodsVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="showGoodsVisible=false">
			<view class="sort-box p-t-30">
				<view class="sort-main">
					<view class="sort-sel" @click="editStatus('',1)">{{$zhTran('批量上架')}}</view>
					<view class="sort-sel" @click="editStatus('',0)">{{$zhTran('批量下架')}}</view>
					<view class="sort-sel" @click="editPriceBatch">{{$zhTran('批量改价')}}</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="sort-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showGoodsVisible=false">{{$zhTran('取消')}}</button>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showPriceVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopPrice">
			<view class="pop-goods p-30">
				<view class="goods--rectangle flex-wrap">
					<view class="flex col-top" style="width: 100%;">
						<!-- 商品图片 -->
						<view class="goods-images">
							<u-image width="100%" height="100%" :src="form.image" mode="aspectFit" />
						</view>
						<!-- 商品信息 -->
						<view class="goods-content">
							<!-- 名称 -->
							<view class="goods-box goods-name line-2">
								<slot name="name">{{ form.name }}</slot>
							</view>

						</view>
					</view>
					<view class="price-box flex row-between m-t-20">
						<view class="price-item strategy">
							<view class="price">{{price_symbol}}{{form.price}}</view>
							<view class="desc flex">
								<u-image width="30rpx" height="30rpx" :src="form.icon" mode="scaleToFill"
									class="m-r-10" />
								<text>{{form.price_title}}</text>
							</view>
						</view>
						<view class="price-item">
							<view class="price">{{price_symbol}}{{form.sell_price}}</view>
							<view class="desc">{{$zhTran('当前售价')}}</view>
						</view>
						<view class="price-item">
							<view class="price">{{price_symbol}}{{form.service_desc}}</view>
							<view class="desc">{{$zhTran('服务费')}}</view>
						</view>
					</view>

					<view class="profit p-20 m-t-20">
						<!-- 当前售价-成本+服务费=最终分润 -->
						{{$zhTran('分润')}}：<text>{{form.sell_price}}</text>-<text>{{form.cost}}</text>+<text>{{form.service_desc}}</text>=<text>{{form.profit}}</text>
					</view>
				</view>
				<view class="m-t-20 bold">{{$zhTran('修改价格')}}</view>
				<view>
					<u-field v-model="form.sell_price_new" :label="$zhTran('当前售价')"
						:placeholder="$zhTran('请输入当前售价')"></u-field>
				</view>
				<view>
					<u-field v-model="form.service" :label="$zhTran('服务费')" :placeholder="$zhTran('请输入服务费')"></u-field>
				</view>
			</view>
			<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
			<view class="price-footer flex row-between p-20">
				<view class="btn btn--cancel" @tap="closePopPrice">{{$zhTran('取消')}}</view>
				<view class="btn btn--primary" @tap="saveNewPrice">{{$zhTran('保存')}}</view>
			</view>
		</u-popup>

		<u-popup v-model="showBatchPriceVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopPrice">
			<view class="pop-batch-goods p-30">
				<view class="m-t-20 bold">{{$zhTran('当前售价批量修改')}}</view>
				<view class="radio-select">
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'price')" v-model="form.price.amount.checked"
							shape="circle" name="amount">{{$zhTran('调整售价幅度')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('price','amount')">
							<text>{{form.price.amount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.price.amount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 420rpx);"></u-field>
					</view>
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'price')" v-model="form.price.discount.checked"
							shape="circle" name="discount">{{$zhTran('调整售价百分比')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('price','discount')">
							<text>{{form.price.discount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.price.discount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 460rpx);"></u-field>
					</view>
				</view>
				<view class="m-t-20 bold">{{$zhTran('服务费修改')}}</view>
				<view class="radio-select">
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'service')"
							v-model="form.service.amount.checked" shape="circle" name="amount">{{$zhTran('调整售价幅度')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('service','amount')">
							<text>{{form.service.amount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.service.amount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 420rpx);"></u-field>
					</view>
					<view class="flex">
						<u-checkbox @change="checkboxGroupChange($event,'service')"
							v-model="form.service.discount.checked" shape="circle"
							name="discount">{{$zhTran('调整售价百分比')}}
						</u-checkbox>
						<view class="m-l-20 p-10 u-border updown" @click="selectChoose('service','discount')">
							<text>{{form.service.discount.desc}}</text>
							<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)">
							</u-icon>
						</view>
						<u-field v-model="form.service.discount.number" :label-width="0" :placeholder="$zhTran('请输入')"
							style="width: calc(100% - 460rpx);"></u-field>
					</view>
				</view>
			</view>
			<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
			<view class="price-footer flex row-between p-20">
				<view class="btn btn--cancel" @tap="closePopPrice">{{$zhTran('取消')}}</view>
				<view class="btn btn--primary" @tap="saveBatchNewPrice">{{$zhTran('保存')}}</view>
			</view>
		</u-popup>
		<u-select v-model="selectShow" :confirm-color="themeColor" cancel-color="#999" @confirm="valueChange($event)"
			:list="updown_list" v-if="refreshKey" :safe-area-inset-bottom="true"></u-select>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {
		apiCloudShopGoodsLists,
		apiCloudShopEditGoodsStatus,
		apiCloudShopEditGoodsPrice,
		apiCloudShopBatchEditGoodsPrice,
		apiCloudShopStoreInfo,
	} from "@/api/cloudshop"
	import {
		getRect
	} from "@/utils/tools";
	import Cache from '@/utils/cache'

	export default {
		name: "ClspSearch",
		mixins: [MescrollMixin],

		data() {
			return {
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 2, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/shop.png'),
						tip: this.$zhTran('暂无商品~'), // 提示
						fixed: true
					},
					toTop: {
						bottom: 300
					},
				},
				goodsList: [], // 商品列表
				search: {
					store_id: '',
					keyword: "", // 商品名称
				},
				is_error: '',
				price_symbol: '￥',
				goodsCheckedLength: 0,
				isSelectedAll: false, //是否全选
				showGoodsVisible: false,
				form: {},
				showPriceVisible: false,
				showBatchPriceVisible: false,
				showUpDown: false,
				type1: '',
				type2: '',
				updown_list: [{
						value: 1,
						label: this.$zhTran('上调')
					},
					{
						value: 0,
						label: this.$zhTran('下调')
					}
				],
				selectShow: false,
				refreshKey: true,
				clspInfo: {}
			};
		},

		computed: {
			// 是否可全选操作
			selectAllDisabled() {
				return !!!this.goodsList.length;
			},
		},
		methods: {
			getCloudShopInfo() {
				apiCloudShopStoreInfo().then(res => {
					this.clspInfo = this.$zhTran(res);
					Cache.set('clspInfo', this.clspInfo)
				})
			},
			// 聚焦搜索
			focusSearch() {
				this.refreshSelect()
			},

			// 搜索
			handleSearch(value) {
				console.log('value', value)
				this.$set(this.search, "keyword", value);
				this.mescroll && this.mescroll.resetUpScroll();
			},
			// 初始化Mescroll
			mescrollInit(mescroll) {
				console.log(mescroll);
				this.mescroll = mescroll;
			},

			// 下拉刷新
			downCallback() {
				this.mescroll && this.mescroll.resetUpScroll();
			},
			// 上拉加载更多
			upCallback(page) {
				const pageNum = page.num;
				const pageSize = page.size;

				apiCloudShopGoodsLists({
						...this.search,
						match: this.is_error == '' ? 1 : '',
						error_match: this.is_error == '' ? '' : 1,
						page_no: pageNum,
						page_size: pageSize,
					})
					.then(({
						lists,
						page_size,
						count,
						extend
					}) => {
						// 如果是第一页需手动置空列表
						if (page.num == 1) this.goodsList = [];
						// 重置列表数据
						this.goodsList = [...this.goodsList, ...lists];
						this.goodsList.forEach((item, idx) => {
							item.checked = false
						})
						this.goodsList = this.$zhTran(this.goodsList)
						this.mescroll.endSuccess(lists.length, count);
						this.price_symbol = extend.price_symbol
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},

			selectChoose(type1, type2) {
				this.type1 = type1
				this.type2 = type2
				this.selectShow = true
				this.refreshKey = false
				this.$nextTick(() => {
					this.refreshKey = true
				})
			},
			valueChange(e) {
				this.form[this.type1][this.type2].updown = e[0].value
				this.form[this.type1][this.type2].desc = e[0].label
				this.type1 = ''
				this.type2 = ''
			},
			editStatus(goods_id, status) {
				var gids = goods_id
				if (gids == '') {
					var garr = this.goodsList.filter(item => item.checked)
					gids = this.goodsList.map(item => item.goods_id)
				}
				uni.showModal({
					title: this.$zhTran('温馨提示'),
					content: `${this.$zhTran('确定')+(status?'上架':'下架')+this.$zhTran('？点击确定商品将会')+(status?'上架出售':'下架')}`,
					success: (res) => {
						if (res.confirm) {
							apiCloudShopEditGoodsStatus({
								goods_id: gids,
								status,
								store_id: this.search.store_id,
							}).then(res => {
								this.goodsList = []
								this.mescroll && this.mescroll.resetUpScroll();
							}).finally(() => {
								this.refreshSelect()
							})
						}
					}
				});
			},
			closePopPrice() {
				this.form = {}
				this.showPriceVisible = false
				this.showBatchPriceVisible = false
			},
			editPrice(row) {
				console.log(row)
				this.form = {
					mode: 1,
					goods_id: row.goods_id,
					image: row.goods.image,
					name: row.goods.name,
					price: row.price_strategy.price,
					icon: row.price_strategy.icon,
					price_title: row.price_strategy.price_title,
					sell_price: row.sell_price,
					service_desc: row.service_desc,
					cost: row.cost,
					profit: row.profit,
					sell_price_new: '',
					service: '',
				}
				this.form = this.$zhTran(this.form)
				this.showPriceVisible = true
			},
			saveNewPrice() {
				if (this.form.sell_price == '' && this.form.service == '') {
					this.$toast({
						title: this.$zhTran('请输入修改价格')
					})
					return
				}
				uni.showModal({
					title: this.$zhTran('温馨提示'),
					content: `${this.$zhTran('确定修改商品 ')+this.form.name+this.$zhTran(' 的价格？')}`,
					success: (res) => {
						if (res.confirm) {
							apiCloudShopEditGoodsPrice({
								goods_ids: this.form.goods_id,
								store_id: this.search.store_id,
								sell_price: this.form.sell_price_new,
								service: this.form.service
							}).then(res => {
								this.goodsList = []
								this.mescroll && this.mescroll.resetUpScroll();
							}).finally(() => {
								this.closePopPrice()
								this.refreshSelect()
							})
						}
					}
				});
			},
			editPriceBatch() {
				this.form = {
					price: {
						type: '',
						amount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						},
						discount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						}
					},
					service: {
						type: '',
						amount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						},
						discount: {
							updown: 1,
							desc: '上调',
							number: '',
							checked: false
						}
					}
				}
				this.form = this.$zhTran(this.form)
				this.showGoodsVisible = false
				this.showBatchPriceVisible = true
			},
			checkboxGroupChange(e, type) {
				if (this.form[type].type != '') {
					if (e.value) {
						this.form[type].type = e.name
						this.form[type].amount.checked = false
						this.form[type].discount.checked = false
						this.form[type][e.name].checked = true
					} else {
						this.form[type].type = ''
					}
				} else {
					this.form[type].type = e.name
					this.form[type][e.name].checked = true
				}
			},
			saveBatchNewPrice() {

				if (this.form.price.type == '' && this.form.service.type == '') {
					this.$toast({
						title: this.$zhTran('请选择改价信息')
					})
					return
				}

				if (this.form.price.type != '' && this.form.price[this.form.price.type].number == '') {
					this.$toast({
						title: this.$zhTran('请输入售价')
					})
					return
				}

				if (this.form.service.type != '' && this.form.service[this.form.service.type].number == '') {
					this.$toast({
						title: this.$zhTran('请输入服务费')
					})
					return
				}

				var garr = this.goodsList.filter(item => item.checked)
				var gids = this.goodsList.map(item => item.goods_id)
				uni.showModal({
					title: this.$zhTran('温馨提示'),
					content: `${this.$zhTran('确定批量修改商品价格？')}`,
					success: (res) => {
						if (res.confirm) {
							apiCloudShopBatchEditGoodsPrice({
								goods_id: gids,
								store_id: this.search.store_id,
								...this.form,
							}).then(res => {
								this.goodsList = []
								this.mescroll && this.mescroll.resetUpScroll();
							}).finally(() => {
								this.closePopPrice()
								this.refreshSelect()
							})
						}
					}
				});
			},
			checkGoods(idx) {
				var arr = this.goodsList[idx]
				arr.checked = !arr.checked
				this.$set(this.goodsList, idx, arr)
				this.goodsCheckedLength = this.goodsList.filter(item => item.checked).length
				if (this.goodsCheckedLength < this.goodsList.length) this.isSelectedAll = false
				if (this.goodsCheckedLength == this.goodsList.length) this.isSelectedAll = true
			},
			// 全选商品
			changeAllSelect(flag) {
				this.goodsList.forEach((item, idx) => {
					item.checked = flag == '' ? !this.isSelectedAll : flag
				})
				if (flag === false) this.isSelectedAll = false
				this.goodsCheckedLength = this.goodsList.filter(item => item.checked).length
			},
			refreshSelect() {
				this.changeAllSelect(false)
				this.showGoodsVisible = false
			},
			batchEdit() {
				if (this.goodsCheckedLength == 0) {
					this.$toast({
						title: this.$zhTran('请选择商品')
					})
					return
				}

				this.showGoodsVisible = true
			}
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
			const {
				share_image,
				share_title
			} = this.appConfig
			const {
				code
			} = this.userInfo

			let shareobj = {
				title: share_title,
				path: `/pages/index/index?invite_code=${code}&clspId=${Cache.get('clsp_id')}`,
				imageUrl: this.clspInfo.avatar || share_image
			}

			//来自页面按钮内的分享
			if (res.from === 'button') {
				const {
					name,
					image,
					goodsid
				} = res.target.dataset
				shareobj.title = name //你要分享的标题
				shareobj.path =
					`/bundle2/pages/goods_detail/goods_detail?id=${goodsid}` //你要跳转的页面路径
				shareobj.imageUrl = this.clspInfo.avatar || image //你要分享的图片
			}

			shareobj = this.$zhTran(shareobj)

			return shareobj
		},
		// #endif
		onLoad() {
			const {
				store_id,
				is_error
			} = this.$Route.query;
			if (!store_id) {
				this.$toast({
					title: this.$zhTran('数据错误')
				})
				setTimeout(() => {
					this.$Router.back();
				}, 1.2 * 1000);
				return
			}
			this.search.store_id = store_id
			this.is_error = is_error
			if (is_error == 1) {
				uni.setNavigationBarTitle({
					title: this.$zhTran('问题商品搜索'),
				});
			} else {
				if (this.$Route.meta.atitle) {
					uni.setNavigationBarTitle({
						title: this.$zhTran(this.$Route.meta.atitle)
					})
				}
			}
			this.getCloudShopInfo()
			this.handleSearch("");
		},
	};
</script>

<style lang="scss" scoped>
	.search-container {
		display: flex;
		flex-direction: column;
	}

	.search-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		background-color: #ffffff;

		.search-action {
			width: 100rpx;
			text-align: center;
		}
	}

	.goods-container {
		flex: 1;
		display: flex;
		padding: 0 20rpx;

		&-rectangle {
			flex-direction: column;
		}

		.goods-item {
			margin-top: 16rpx;
		}
	}

	.goods {

		&--rectangle {
			flex-direction: row;
			align-items: center;
			min-height: 250rpx;
			padding: 20rpx;
			display: flex;
			border-radius: 7px;
			background-color: #ffffff;
			overflow: hidden;

			.error-desc {
				width: 100%;
				background-color: rgba(218, 35, 33, 1);
				font-size: 24rpx;
				border-radius: 4px;
			}

			.goods-images {
				box-sizing: border-box;
				width: calc(200rpx - 2 * 20rpx);
				height: calc(200rpx - 2 * 20rpx);
				border-radius: 7px;
				overflow: hidden;
				position: relative;

				.img-box {
					position: absolute;
					top: 10rpx;
					left: 10rpx;
				}
			}

			.goods-content {
				margin-left: 20rpx;

				.goods-box {
					min-height: 40rpx;
				}
			}

			.price-box {
				width: 100%;

				.price-item {
					text-align: center;

					.price {
						color: rgba(255, 141, 26, 1);
						font-size: 26rpx;
						font-weight: bold;
					}

					.desc {
						color: rgba(151, 151, 151, 1);
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.strategy {
					.price {
						color: rgba(218, 35, 33, 1);
					}

					.desc {
						background-color: rgba(218, 35, 33, 1);
						color: #fff;
						font-size: 22rpx;
						padding: 5rpx 7rpx;
						border-radius: 6rpx;
					}
				}
			}

			.profit {
				width: 100%;
				background-color: rgba(242, 246, 255, 1);
				color: rgba(151, 151, 151, 1);
				font-size: 24rpx;

				text {
					color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-content {
			box-sizing: border-box;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			position: relative;
		}

		.btn-box {
			width: 100%;
			padding: 30rpx 15rpx;
			background-color: rgba(242, 246, 255, 1);

			.btn-item {
				width: calc((100% - 30rpx) / 3);
				padding: 10rpx 0;
				text-align: center;
				background-color: #fff;
				color: rgba(56, 56, 56, 1);
				border-radius: 10rpx;

				&.share {
					background-color: rgba(64, 115, 250, 1);
					color: #fff;
					height: 60rpx;
				}
			}
		}
	}


	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 20;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 24rpx constant(safe-area-inset-bottom) 24rpx;
		padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);

		.all-price {
			text-align: right;
			flex: 1;
		}

		.right-btn {
			padding: 20rpx 45rpx;
			color: #fff;
			background-color: rgba(64, 115, 250, 1);
			border-radius: 10rpx;
		}
	}


	.sort {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.sort-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}

			.sort-sel:active {
				color: #fff;
				background-color: rgba(64, 115, 250, 1);
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}

	.pop-goods {
		.goods--rectangle {
			padding: 0;
		}
	}

	.pop-batch-goods {

		.radio-select {
			font-size: 26rpx;
		}

		.updown {
			width: 130rpx;
		}
	}

	.price-footer {

		.btn {
			width: 50%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 10rpx;


			&--primary {
				color: #fff;
				background-color: rgba(64, 115, 250, 1);
			}
		}
	}
</style>